<template>
	<SafeAreaNavBar>
		<NavBar
			:height="44"
			title="注册账号"
			:isNavBarLeftShow="true"
			@onClickLeft="$jump('back')"
		></NavBar>
	</SafeAreaNavBar>
	<SafeAreaContent :offsetTop="44" :offsetBottom="44">
		<view class="container_1 container_common_2">
			<!-- 表单的规则一定要通过属性的方式绑定，用setRules 部分平台会有兼容问题-->
			<uni-forms ref="form" :modelValue="formData" :rules="rules">
				<uni-forms-item label="手机号" name="tel" label-width="160rpx" required>
					<view class="box_common_1">
						<uni-easyinput
							type="text"
							:trim="true"
							v-model="formData.tel"
							:inputBorder="false"
							borderColor="transparent"
							placeholder="请输入"
						/>
						<view class="ml_10"></view>
						<CodeButton
							:tel="formData.tel"
							:count="60"
							@getCode="getCode"
						></CodeButton>
					</view>
				</uni-forms-item>
				<uni-forms-item
					label="验证码"
					name="code"
					label-width="160rpx"
					required
				>
					<uni-easyinput
						type="text"
						:trim="true"
						v-model="formData.code"
						borderColor="transparent"
						:maxlength="18"
						:inputBorder="false"
						placeholder="请输入"
					/>
				</uni-forms-item>
			</uni-forms>
		</view>
	</SafeAreaContent>
	<SafeAreaBotBar :offsetBottom="0">
		<view class="container_common_4">
			<button @click="submitForm" class="button_common_large">注册</button>
		</view>
	</SafeAreaBotBar>
</template>

<script>
import useStore from '@/store/index';
import SafeAreaNavBar from '@/components/SafeAreaNavBar/SafeAreaNavBar.vue';
import SafeAreaContent from '@/components/SafeAreaContent/SafeAreaContent.vue';
import SafeAreaBotBar from '@/components/SafeAreaBotBar/SafeAreaBotBar.vue';
import CodeButton from '@/components/CodeButton/CodeButton.vue';
import { getCode } from '@/api/register';
import { rules, formData } from '@/data/register';
import { register } from '@/api/register';
import { Storage } from '@/utils/storage';
import { getChannel } from '@/utils/channelModel';
export default {
	components: {
		SafeAreaNavBar,
		SafeAreaContent,
		SafeAreaBotBar,
		CodeButton,
	},

	data() {
		return {
			scrollTop: 0,
			formData, // 表单数据
			rules,
		};
	},
	onLoad() {},
	onReady() {
	},
	methods: {
		async submitForm() {
			const { user } = useStore();
			const { tel, code } = this.formData;
			const miniUserId = user.getCodeState;
			console.log('miniUserId', miniUserId);
			// 此时的通道，微信小程序还是支付宝小程序
			const channel = getChannel();
			const data = {
				tel,
				code,
				miniUserId,
				payChannel: channel === 'wx' ? '2' : '1', // '1':支付宝 '2':微信
			};
			const rules = ['tel', 'code'];
			await this.$refs.form.validate(rules);
			uni.showLoading({
				title: '提交中...',
			});
			if (!miniUserId) {
				uni.showToast({
					title: '请先授权登录',
					icon: 'none',
				});
				return;
			}
			const res = await register(data);
			console.log(res);
			Storage.set('userInfo', res);
			uni.hideLoading();
		},
		async getCode() {
			console.log('父组件验证码');
			if (!this.formData.tel) {
				uni.showToast({
					title: '请填写手机号',
					icon: 'none',
				});
				return;
			}
			const res = await getCode(this.formData.tel);
			console.log(res);
		},
	},
};
</script>

<style lang="scss" scoped>
.container_1 {
	min-height: 100vh;
	color: #333333;
	background: #fff;
}
::v-deep .uni-easyinput__content-input {
	background-color: #f7f7f7;
}
</style>
